<template>
  <div class="container">
    <van-image
      :src="info.photo"
      height="50"
      round
      width="50"
    />
    <div class="user_info">
      <div class="name">{{info.name}}</div>
      <div class="fans_count">粉丝数:{{info.fans_count}}</div>
    </div>
    <div class="mutual_btn">
      <van-button
        :key="Date.now()"
        :type="info.mutual_follow?brtnType1:brtnType2"
        @click="cancelFocus"
        size="small"
        v-if="type === 0"
      >{{info.mutual_follow?btnText1:btnText2}}</van-button>
      <van-button
        :type="info.mutual_follow?'info':'danger'"
        @click="Focus"
        size="small"
        v-else
      >{{info.mutual_follow?'已互关':'关注'}}</van-button>
    </div>
  </div>
</template>

<script>
import { followUser, unFollowUser } from "../../network/ffans";

export default {
  name: "FollowUser",
  props: ["info", "type"],
  components: {},
  computed: {},
  data() {
    return {
      btnText1: "已互关",
      btnText2: "已关注",
      brtnType1: "info",
      brtnType2: "primary"
    };
  },
  created() {},
  mounted() {},
  methods: {
    //关注的人按钮
    async cancelFocus() {
      if (this.info.mutual_follow && this.brtnType1==="info") {
        //互关的情况下取消关注
        const result = await unFollowUser(this.info.id);
        this.btnText1 = "关注";
        this.brtnType1 = "danger"
      } else if(!this.info.mutual_follow && this.brtnType2==="primary") {
        //非互关的情况下取消关注
        const result = await unFollowUser(this.info.id);
        this.btnText2 = "关注";
        this.brtnType2 = "danger";
      }else if(this.info.mutual_follow && this.brtnType1==="danger"){
        //互关情况下再次关注
        const result = await followUser(this.info.id);
        this.btnText1 = '已互关'
        this.brtnType1 = "info"
      }else{
        //非互关情况下再次关注
        const result = await followUser(this.info.id);
        this.btnText2 = '已关注'
        this.brtnType2 = "primary"
      }
    },
    //粉丝按钮
    async Focus() {
      if(this.info.mutual_follow){
        //已经关注，再点击取消关注
        await unFollowUser(this.info.id)
        this.info.mutual_follow = false
      }else{
        //未关注，点击关注
        await followUser(this.info.id);
        this.info.mutual_follow = true
      }
      
    }
  }
};
</script>

<style scoped lang="stylus" >
.container
  display flex
  padding 10px

.van-image
  min-width 50px

.mutual_btn
  width 80px
  min-width 80px
  line-height 50px
  text-align center

.user_info
  margin-left 10px
  flex 1
  display flex
  flex-direction column
  justify-content space-evenly

  .fans_count
    font-size 12px
    color #999
</style>